<template>
    <div>
        <my-header></my-header>
        <div class="order">
            <div class="log">
                <span class="log_info">收件人名:</span>
                <Input style="width:11vw" v-model="recipient"/>
            </div>
            <div class="log">
                <span class="log_info">手机号码:</span>
                <Input style="width:15vw" v-model="phoneNum"/>
            </div>
             <div class="select_position_box">
                <span class="log_info">收货地址:</span>
                <div class="select_position">
                    <Select v-model="sheng" @on-change="choseProvince" style="width:200px" placeholder="省级地区">
                        <Option v-for="item in province" :value="item.id" :key="item.id">{{ item.value }}</Option>
                    </Select>
                    <Select v-model="shi"  @on-change="choseCity" style="width:200px" placeholder="市级地区">
                        <Option v-for="item in shi1" :value="item.id" :key="item.id">{{ item.value }}</Option>
                    </Select>
                    <Select v-model="qu" style="width:200px" placeholder="区级地区">
                        <Option v-for="item in qu1" :value="item.id" :key="item.id">{{ item.value }}</Option>
                    </Select>
                     <Input v-model="detailLocation" placeholder="街道信息" class="detail_position" />
                </div>
            </div>
            <div class="goods_info">
                <span class="goods_log">商品信息:</span><br>
                <div class="goods_log_info">
                    <img class="goods_cover" src="../../assets/bookType1.png">
                    <div class='book_profile'>
                        <span class="book_profile_title">书籍简介:</span>{{bookInfo}}
                    </div>
                </div>
                <div class="goods_title">书名：{{bookName}}</div>
                <div class="goods_price">价格：{{bookPrice}}元</div>
            </div>
            <div class="bottom_btm">
                <Button class="btn" @click="$router.go(-1)">取消</Button>
                <Button class="btn" type="error" @click="pay()">购买</Button>
            </div>
        </div>
        <my-footer></my-footer>
    </div>
</template>

<script>
import myFooter from '../../components/footer'
import myHeader from '../../components/header'
import { city } from '../../assets/cityData'

export default {
    components: { 
        myHeader,
        myFooter 
    },
    data() {
        return {
            recipient: '',
            phoneNum: null,
            bookName: '游园记',
            bookPrice: 30,
            sheng: '',
            shi: '',
            qu: '',
            detailLocation: '',
            province: [],
            shi1: [],
            qu1: [],
            bookInfo: '游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记游园记'
        }
    },
    created (){
        this.getCityData();
    },
    methods: {
        pay() {
            if(this.sheng && this.shi && this.qu && this.detailLocation && this.recipient && this.phoneNum) {

            } else {
                this.$Message.warning('请填写完所有信息！');
            }
        },
        choseProvince(e) {
            for (var index2 in this.province) {
                if (e === this.province[index2].id) {
                    this.shi1 = this.province[index2].children;
                    this.qu1 =this.province[index2].children[0].children;
                }
            }
            this.shi = '';
            this.qu = '';
        },
        choseCity:function(e) {
            for (var index3 in this.city) {
                if (e === this.city[index3].id) {
                    this.qu1 = this.city[index3].children;
                }
            }
        },
        getCityData() {
            var that = this;
            let data = city;
            that.province = [];
            that.city = [];
            that.block = [];
            // 省市区数据分类
            for (var item in data) {
                if (item.match(/0000$/)) {//省
                    that.province.push({id: item, value: data[item], children: []})
                } else if (item.match(/00$/)) {//市
                    that.city.push({id: item, value: data[item], children: []})
                } else {//区
                    that.block.push({id: item, value: data[item]})
                }
            }
            // 分类市级
            for (var index in that.province) {
                for (var index1 in that.city) {
                    if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
                        that.province[index].children.push(that.city[index1])
                    }
                }
            }
            // 分类区级
            for(var item1 in that.city) {
                for(var item2 in that.block) {
                    if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
                        that.city[item1].children.push(that.block[item2])
                    }
                }
            }
        },
    }
}
</script>

<style scoped>
.order{
    width: 38vw;
    height: 75vh;
    margin-top: 14vh;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3vw;
    padding-top: 1vh;
    border: 1px solid rgb(168, 166, 166);
    box-shadow: 5px 5px 5px #888888;
    min-width: 720px;
    min-height: 720px;
}
.log{
    margin-top: 3vh;
    height: 32px;
    width: 30vw;
    display: flex;
    
}
.log_info{
    font-size: 21px;
    line-height: 32px;
    margin-right: 2vw;
}
.goods_info{
    margin-top: 3vh;
}
.goods_log{
    font-size: 23px;
    font-weight: bolder;
    line-height: 32px;
    margin-right: 2vw;
    color: rgb(105, 104, 104);
}
.goods_log_info{
    display: flex
}
.select_position_box{
    margin-top: 3vh;
}
.select_position{
    margin-top: 1.5vh;
}
.detail_position {
    margin-top: 1.4vh;
    width: 20vw;
}
.goods_cover{
    margin-top: 1vh;
    margin-left: 1vw;
    width: 150px;
    height: 190px;
}
.book_profile{
    font-size: 16px;
    margin-top: 4vh;
    margin-left: 2vw;
    width: 20vw;
    height: 10vh;
    line-height: 30px;
}
.book_profile_title{
    font-weight: bold;
    color: rgb(145, 138, 138);
}
.goods_title{
    margin-left: 1vw;
    margin-top: 1vh;
    font-size: 22px;
    color: rgb(184, 171, 171);
}
.goods_price{
    margin-left: 1vw;
    margin-top: 1vh;
    font-size: 22px;
    color: rgb(206, 106, 106);
}
.bottom_btm{
    margin-top: 3vh;
    padding-left: 19vw;
}
.btn{
    width: 5vw;
    height: 4.2vh;
    margin-left: 1vw;
}
</style>

